<template>
	<view class="con">
		<view class="head">
			<view class="head-box">
				<view class="head-box-num" style="color: #2D53EF;">{{painatinfo['nums'] || '--' || '--'}}</view>
				<view class="head-box-info">上网</view>
			</view>
			<view class="head-box">
				<view class="head-box-num" style="color: #00aa00;">{{painatinfo['success_nums'] || '--'}}</view>
				<view class="head-box-info">已拨通</view>
			</view>
			<view class="head-box">
				<view class="head-box-num" style="color: #ff0000;" >{{painatinfo['nums']-painatinfo['success_nums'] || '--'}}</view>
				<view class="head-box-info">未拨通</view>
			</view>
			<view class="head-box">
				<view class="head-box-num" style="color: #00aa00;">{{painatinfo['connect_nums'] || '--'}}</view>
				<view class="head-box-info">已联网</view>
			</view>
			<!-- <view class="head-box">
				<view class="head-box-num" style="color: #00aa00;">{{I6}}</view>
				<view class="head-box-info">IPv6联网</view>
			</view> -->
		</view>
		<view style="text-align: right;font-size: 26rpx;">
			IPv6:已开启<text style="color: #2D53EF;">{{painatinfo['nums'] || '--'}}</text>条拨通<text style="color: #00aa00;">{{painatinfo['success_nums'] || '--'}}</text>条联网<text style="color: #00aa00;">{{painatinfo['connect_nums'] || '--'}}</text>条
		</view>
		<view style="width: 680rpx;border-radius: 20rpx;background-color: white;padding: 20rpx;margin-top: 20rpx;" v-for="(item,i) in log" :key="i">
			<view style="font-weight: bolder;">网卡:{{item.name}}<text style="margin: 0rpx 10rpx;">|</text>速率:{{item.speed}}M</view>
			<view style="font-size: 26rpx;margin-top: 10rpx;">共{{item.lines}}条线路</view>
			<view style="display: flex;margin-top: 20rpx;margin-bottom: 20rpx;background-color: #EBEEFD;height: 60rpx;line-height: 60rpx;padding: 10rpx;border-radius: 20rpx;">
				<view style="width: 10%;">序号</view>
				<view style="width: 45%;margin-left: 20rpx;">上网信息</view>
				<view style="width: 45%;">上网结果</view>
			</view>
			<view style="display: flex;" v-for="(items,j) in log[i].info" :key="j">
				<view style="width: 10%;line-height: 108rpx;text-align: center;">{{items.number}}</view>
				<view style="width: 45%;margin-top: 20rpx;">
					<view style="font-size: 30rpx;">{{(items.account).slice(0,13)}}</view>
					<view style="font-size: 20rpx;">密码: {{items.password}}<text style="margin: 0rpx 10rpx;">|</text>vlan id:{{items.vlan_id}}</view>
				</view>
				<view style="width: 45%;">
					<view style="font-size: 30rpx;color: #00aa00;" v-if="items.successed == '已播通'">{{items.successed}}<text style="color: black;">/</text>{{items.connected}}</view>
					<view style="font-size: 30rpx;color: #ff0000;" v-if="items.successed == '未播通'">{{items.successed}}<text style="color: black;">/</text>{{items.connected}}</view>
					<view style="font-size: 20rpx;" v-if="items.v6Successed == '已播通'">IPv6:<text style="color: #00aa00;">{{items.v6Successed}}<text style="color: black;">/</text>{{items.v6Connected}}</text></view>
					<view style="font-size: 20rpx;" v-if="items.v6Successed == '未播通'">IPv6:<text style="color: #ff0000;">{{items.v6Successed}}<text style="color: black;">/</text>{{items.v6Connected}}</text></view>
					<view style="font-size: 20rpx;">IP:{{items.ip}}</view>
				</view>
			</view>
		</view>
		<view class="btn-two" style="background-color: #55aaff;color: white;" v-if="hardinfo['state'] == '服务中'" @tap="none">调整线路</view>
		<view class="btn-two" style="background-color: #55aaff;color: white;" v-else @tap="toNumber">调整线路</view>
		<view class="btn-two" style="background-color: #55aaff;color: white;" @tap="gocallnum">去拨号</view>
		<view class="btn-two" @tap="netcardinfo">同步网卡信息</view>
	</view>
</template>

<script>
	let App = getApp()
	export default {
		data() {
			return {
				dataInfo:[],
				manager:[],
				traffic:[],
				info:[],
				rSelect:'',
				dSelect:'',
				nodeID:'',
				success:0,
				fail:0,
				I4:0,
				I6:0,
				painatinfo:[],
				natcard:[],
				log:[],
				hardinfo:[]
			}
		},
		
		onLoad(option) {
			this.eid = option.selectID
			this.eids = option.nodeID
			// this.getInfo()
			//this.getnatinfo()
			this.getnatsinfo()
		},
		
		methods: {
			getInfo(){
				uni.showLoading({
					title:'加载中'
				})
				
				let	num_s = 0;
				let	num_f = 0;
				let	num_s4 = 0;
				let	num_s6 = 0;

				
				this.$api.interfaceApi('dialStatus')({
					eid:this.eid,
					sys:App.globalData.sys
				}).then(res=>{
					uni.hideLoading()
					if(res.code == 200){
						this.dataList = res.data
						for(var i=0;i < res.data.detail.length;i++){
							if(res.data.detail[i]['type'] ==  "manager"){
								this.manager = res.data.detail[i]
								this.dSelect = i
							}
							if(res.data.detail[i]['type'] ==  "traffic"){
								this.traffic = res.data.detail[i]
								this.dataInfo = res.data.detail[i].dialStatusInfo
								this.rSelect = i
								for(var j=0;j<res.data.detail[i].dialStatusInfo.length;j++){
									if(res.data.detail[i].dialStatusInfo[j].dialStatus == 'failed'){
										num_f++;
									}
									
									
									if(res.data.detail[i].dialStatusInfo[j].dialStatus == 'succeed'){
										num_s++;
									}
									
									if(res.data.detail[i].dialStatusInfo[j].connectStatus == 'succeed'){
										num_s4++;
									}
	
									if(res.data.detail[i].dialStatusInfo[j].ipv6ConnectStatus == 'succeed'){
										num_s6++;
									}
		
								}
							}
						}
						this.success = num_s
						this.fail = num_f
						this.I4 = num_s4
						this.I6 = num_s6
						this.info = res.data.info
						this.nodeID = res.data.info.nodeID
					}else{
						uni.showToast({
							title:'获取失败,请联系管理',
							icon:'none'
						})
					}
				})
			},
			
			// //派享网络信息
			// getnatinfo(){
			// 	uni.showLoading({
			// 		title:'加载中'
			// 	})
			// 	this.$api.interfaceApi('getpainatinfo')({
			// 		nodeId:this.eid,
			// 		//sys:App.globalData.sys
			// 	}).then(res=>{
			// 		uni.hideLoading()
			// 		this.painatinfo = res
			// 		this.log = res.log
			// 		this.natcard = res.log[0].info
			// 	})
			// },
			
			//派享网络信息
			getnatsinfo(){
				uni.showLoading({
					title:'加载中'
				})
				this.$api.interfaceApi('getpainatinfo')({
					nodeId:this.eid,
					//sys:App.globalData.sys
				}).then(res=>{
					uni.hideLoading()
					this.painatinfo = res
					this.log = res.log
					this.gethardwareInfo()
				})
			},
			
			//同步网卡信息
			netcardinfo(){
				this.getnatsinfo()
			},
			
			//拨号按钮方法
			gocallnum(){
				uni.showLoading({
					title:'加载中'
				})
				this.$api.interfaceApi('bgipushnum')({
					nodeId:this.eid,
					//sys:App.globalData.sys
				}).then(res=>{
					uni.hideLoading()
					// uni.showToast({
					// 	title:res.msg,
					// 	icon:'error'
					// })
					//this.getnatsinfo()
					if(res.code == 200){
						uni.showToast({
							title:'设备拨号中',
							icon:'error'
						})
					}else if(res.code == 400002){
						uni.showToast({
							title:'设备拨号中，请勿重复点击',
							icon:'none'
						})
					}else{
						uni.showToast({
							title:res.msg,
							icon:'error'
						})
					}
				})
			},
			
			toNumber(){
				uni.navigateTo({
					// url:'/pages/equipment/update-number?nodeID='+this.nodeID+'&rSelect='+this.rSelect+'&dSelect='+this.dSelect
					url:'/pages/index/numbers?nodeID='+this.eid
				})
			},
			
			//派享硬件信息
			gethardwareInfo(){
				let userinfo = uni.getStorageSync('userinfo');
					
				this.$api.interfaceApi('gethardwareInfo')({
					nodeId:this.eid,
					//sys:App.globalData.sys
				}).then(res=>{
					this.hardinfo = res
					this.hardwareinfo = res.diskInfo
					console.log(this.hardinfo)
				})
			},
			
			none(){
				uni.showToast({
					title:'服务中不可修改',
					icon:'error'
				})
			}
			
			
		}
	}
</script>

<style lang="scss">
	.con{
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		
		.btn-two{
			border: 1rpx solid #e0e0e0;
			text-align: center;
			padding: 20rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			margin-top: 30rpx;
			margin-bottom: 20rpx;
		}
		
		.head{
			display: flex;
			justify-content: space-between;
			background-color: #FFFFFF;
			padding: 10rpx 30rpx;
			box-sizing: border-box;
			.head-box{
				padding: 20rpx 0;
				box-sizing: border-box;
				text-align: center;
				
				.head-box-num{
					padding: 20rpx;
					box-sizing: border-box;
				}
				.head-box-info{
					color: #666666;
					font-size: 26rpx;
				}
			}
			
		}
		
		.admin{
			margin-top: 20rpx;
			border-radius: 20rpx;
			font-size: 26rpx;
			padding: 30rpx 20rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
		}
		
		.data-info{
			margin-top: 20rpx;
			border-radius: 20rpx;
			font-size: 26rpx;
			background-color: #FFFFFF;
			
			.data-info-head{
				padding: 30rpx 20rpx 0 20rpx;
				box-sizing: border-box;
			}
			
			.data-info-nums{
				padding: 0rpx 20rpx 30rpx 20rpx;
				box-sizing: border-box;
			}
			
			.data-info-title{
				display: flex;
				justify-content: space-between;
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				font-size: 26rpx;
				font-weight: bolder;
				background-color: #75cae645;
				.vlan{
					width: 20%;
				}
				.numinfo{
					width: 40%;
				}
				.close{
					width: 40%;
				}
			}
			
			.data-info-title-line:nth-of-type(even){
				display: flex;
				justify-content: space-between;
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				font-size: 26rpx;
				
				
				.vlan-line{
					width: 20%;
					display: flex;
					align-items: center;
				}
				.numinfo-line{
					width: 40%;
				}
				.close-line{
					width: 40%;
					display: flex;
					flex-direction: column;
					justify-content: center;
				}
			}
			
			.data-info-title-line:nth-of-type(odd){
				display: flex;
				justify-content: space-between;
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				font-size: 26rpx;
				background-color: #75cae645;
				.vlan-line{
					width: 20%;
					display: flex;
					align-items: center;
				}
				.numinfo-line{
					width: 40%;
				}
				.close-line{
					width: 40%;
					display: flex;
					flex-direction: column;
					justify-content: center;
				}
			}	
		}
		
		.btn-one{
			background-color: #00aaff;
			color: #FFFFFF;
			text-align: center;
			padding: 20rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			margin-top: 30rpx;
		}
		
		.btn-two{
			border: 1rpx solid #e0e0e0;
			text-align: center;
			padding: 20rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			margin-top: 30rpx;
		}
	}
</style>
